<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right" style="height: 30px;">
                <el-breadcrumb-item>HR系统</el-breadcrumb-item>
                <el-breadcrumb-item>信息管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 角色搜索模块 -->
        <div>
            <el-form label-width="100px" style="flex: 1;">
                <div style="display: flex;">
                    <el-row>
                        <el-col style="width: 100px;">
                            <el-form-item label="角色名称:"></el-form-item>
                        </el-col>
                        <el-col style="width: 200px;">
                            <el-input placeholder="请输入角色名称：" v-model="roleInfo.name"></el-input>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-form-item label="角色标识："></el-form-item>
                        </el-col>
                        <el-col style="width: 200px;">
                            <el-input placeholder="请输入角色标识：" v-model="roleInfo.roleSign"></el-input>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-form>
                                <el-form-item>
                                    <el-button type="primary" @click="getRoleData()" size="mini"
                                        style="height: 40px;"><i class="el-icon-search" />搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-button type="danger" @click="reset()" size="mini" style="height: 40px;">重置 <i
                                    class="el-icon-refresh-left" /></el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <!-- 新增角色等操作 -->
        <div class="button-container">
            <el-button type="primary" plain @click="addDialogVisible = true" icon="el-icon-plus"
                style="height: fit-content;">新增</el-button><!--当添加角色时，弹框出现 -->
            <el-button type="primary" plain icon="el-icon-delete" style="height: fit-content;"
                @click="batchDeleteRole()">批量删除</el-button>
            <el-button type="primary" plain class="iconfont icon-hrjiesuo" style="height: fit-content;"
                @click="batchShengXiaoRole()">生效</el-button>
            <el-button type="primary" plain class="iconfont icon-hrsuoding" style="height: fit-content;"
                @click="batchShiXiaoRole()">失效</el-button>
        </div>
        <!-- 查询出来的结果区域 -->
        <div class="common-table">
            <el-table ref="roleTable" :data="roleList" height="350px" border stripe :header-cell-style="{
                                background: '#eef1f6', color: '#606266',
                                textAlign: 'center', fontWeight: 'bold', borderWidth: '3px'
                            }" @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <!-- <el-table-column label="角色id" align="center" prop="roleId"></el-table-column> -->
                <el-table-column label="角色名称" align="center" prop="name"></el-table-column>
                <el-table-column label="角色标识" align="center" prop="roleSign"></el-table-column>
                <el-table-column label="状态" align="center" prop="status"></el-table-column>
                <el-table-column label="备注" align="center" prop="remark"></el-table-column>
                <el-table-column label="操作" width="500px" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-col style="width: 100px;">
                                <!-- 绑定资源 -->
                                <el-button type="primary" icon="el-icon-menu" size="mini"
                                    @click="BangDingMenu(scope.row.roleSign)" style="width: 90px;">绑定菜单</el-button>
                            </el-col>
                            <el-col style="width: 85px;">
                                <!-- 修改 -->
                                <el-button type="primary" icon="el-icon-edit" size="mini"
                                    @click="EditRole(scope.row.roleSign)" style="width: 75px;">编辑</el-button>
                            </el-col>
                            <el-col style="width: 85px;">
                                <!-- 删除 -->
                                <el-button type="danger" icon="el-icon-delete" size="mini"
                                    @click="DeleteRole(scope.row.roleSign)" style="width: 75px;">删除</el-button>
                            </el-col>
                            <el-col style="width: 85px;">
                                <!-- 生效 -->
                                <el-button type="success" class="iconfont icon-hrjiesuo" size="mini"
                                    @click="roleStateShengXiao(scope.row.roleSign, scope.row.status)"
                                    style="width: 75px; height: 28px;">生效</el-button>
                            </el-col>
                            <el-col style="width: 85px;">
                                <!-- 失效 -->
                                <el-button type="info" class="iconfont icon-hrsuoding" size="mini"
                                    @click="roleStateShiXiAo(scope.row.roleSign, scope.row.status)"
                                    style="width: 75x;height: 28px;">失效</el-button>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 size-change 每页最大变化 current-change 当前最大变化 layout功能组件-->
        <div class="pager">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="roleInfo.pageNumber" :page-sizes="[5, 10, 20, 50]" :page-size="roleInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 添加角色区域 -->
        <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%">
            <el-form :model="addRoleForm" :rules="addRoleFormRules" ref="addRoleFormRef">
                <el-row>
                    <el-col style="width: 120px;">
                        <el-form-item label="角色标识：" prop="roleSign"
                            style="width: 120px;display:inline-block;"></el-form-item>
                    </el-col>
                    <el-col style="width: 150px;">
                        <el-input v-model="addRoleForm.roleSign" placeholder="请输入角色标识" style="width: 150px;"></el-input>
                    </el-col>
                    <el-col style="width: 120px;height: 40px;">
                        <el-form-item label="角色名称：" prop="name"
                            style="width: 120px;display:inline-block;"></el-form-item>
                    </el-col>
                    <el-col style="width: 150px;">
                        <el-input v-model="addRoleForm.name" placeholder="请输入角色名称" style="width: 150px;"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col style="width: 110px;height: 40px;">
                        <el-form-item label="备注:" style="display:inline-block;" prop="remark"></el-form-item>
                    </el-col>
                    <el-col style="width: 200px;height: 40px;margin-left: 10px;">
                        <el-input type="textarea" placeholder="请输入" v-model.trim="addRoleForm.remark"
                            :autosize="{ minRows: 2, maxRows: 4 }" maxlength="100" show-word-limit />
                    </el-col>
                </el-row>
            </el-form>
            <div class="row-container">
                <el-row>
                    <el-col style="width: 100px;">
                        <!-- 取消即关闭窗口 -->
                        <el-button @click="addClose()">取消</el-button>
                    </el-col>
                    <el-col style="width: 100px;">
                        <el-button type="primary" @click="addRole">确定</el-button>
                    </el-col>
                    <el-col style="width: 100px;">
                        <el-button type="info" @click="addRoleClear()">重置</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
        <!-- 编辑角色区域 -->
        <el-dialog title="修改角色" :visible.sync="editDialogVisible" width="50%" class="">
            <el-form :model="editRoleForm" ref="editRoleFormRef">
                <el-row>
                    <el-col style="width: 120px;">
                        <el-form-item label="角色标识：" prop="roleSign"
                            style="width: 120px;display:inline-block;"></el-form-item>
                    </el-col>
                    <el-col style="width: 150px;">
                        <el-input v-model="editRoleForm.roleSign" placeholder="请输入角色标识" style="width: 150px;"
                            disabled=""></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="width: 120px;height: 40px;">
                        <el-form-item label="角色名称：" prop="name"
                            style="width: 120px;display:inline-block;"></el-form-item>
                    </el-col>
                    <el-col style="width: 150px;">
                        <el-input v-model="editRoleForm.name" placeholder="请输入角色名称" style="width: 150px;"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col style="width: 110px;height: 40px;">
                        <el-form-item label="备注:" style="display:inline-block;" prop="remark"></el-form-item>
                    </el-col>
                    <el-col style="width: 200px;height: 40px;margin-left: 10px;">
                        <el-input type="textarea" placeholder="请输入" v-model.trim="editRoleForm.remark"
                            :autosize="{ minRows: 2, maxRows: 4 }" maxlength="100" show-word-limit />
                    </el-col>
                </el-row>
            </el-form>
            <div class="row-container">
                <el-row>
                    <el-col style="width: 100px;">
                        <!-- 取消即关闭窗口 -->
                        <el-button @click="editClose()">取消</el-button>
                    </el-col>
                    <el-col style="width: 100px;">
                        <el-button type="primary" @click="editRoleInfo">确定</el-button>
                    </el-col>
                    <el-col style="width: 100px;">
                        <el-button type="info" @click="editRoleClear()">重置</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    created() {
        this.getRoleData();
    },
    data() {
        return {
            // 角色查询的参数信息
            roleInfo: {
                name: "",//角色名称
                roleSign: "",//角色标识
                pageNumber: 1,//默认显示的页数
                pageSize: 5,//每页默认显示的数据
            },
            roleList: [],
            total: 0,//总记录数
            //定义一个角色数据数组(即复选框选中的数据)
            roleSigns: [],
            addDialogVisible: false,//对话框默认关闭状态
            // 添加角色的数据
            addRoleForm: {
                roleSign: '',//角色标识
                name: '',//角色名称
                remark: '',//备注
            },

            //修改员工的数据
            editRoleForm: {
                roleSign: '',//员工工号--不可修改
                name: '',//员工姓名
                remark: '',//备注
            },
            //显示/隐藏修改员工栏
            editDialogVisible: false,
            //添加员工字段验证
            addRoleFormRules: {
                roleSign: [
                    { required: true, message: '请输入角色标识', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
        async getRoleData() {
            const { data: res } = await this.$http.get("role", { params: this.roleInfo });
            this.roleList = res.data.data;
            this.total = res.data.roleCounts;
            if (res.code == 106) {
                return this.$message.error(res.message);
            }
        },
        handleSelectionChange() {
            //打印出来的数据 就是勾选获取的勾选那一行的数据
            //console.log(this.$refs.roleTable.selection);
            /// 遍历了 勾选获取的那一行数据 然后 赋值给我自己定义的roleSigns这个数组了
            this.roleSigns = this.$refs.roleTable.selection.map((item) => item.roleSign);
            // roleSigns 这个数组 就是由勾选每一行的id组成的数组了 这个数组里全是勾选那行的roleSign
            //console.log(this.roleSigns, 777);
        },
        //监听 page size 改变的事件
        handleSizeChange(newSize) {
            this.roleInfo.pageSize = newSize;
            this.getRoleData();
        },
        //监听 页码值 改变的事件
        handleCurrentChange(newPage) {
            this.roleInfo.pageNum = newPage;
            this.getRoleData();
        },
        reset() {
            this.roleInfo.name = "",
                this.roleInfo.roleSign = ""
        },
        //新增员工
        addRole() {
            this.$refs.addRoleFormRef.validate(async valid => {
                if (!valid) return;
                const { data: res } = await this.$http.post("addRole", this.addRoleForm);
                if (res.message != '成功') {
                    return this.$message.error("新增失败！！！");
                }
                this.$message.success("新增成功！！！");
                this.addDialogVisible = false;
                this.addRoleClear();
                this.getRoleData();
            });
        },
        //addRoleClear()方法，当鼠标放在输入框中，清空输入框内容,通过@blur去触发---新增部门信息重置
        addRoleClear() {
            this.addRoleForm.name = "",
            this.addRoleForm.roleSign = "",
            this.addRoleForm.remark = ""
        },
        addClose() {
            //清空表单方法
            this.title = '新增窗体'
            this.addDialogVisible = false;
            this.addRoleForm = {
                roleSign: '',//角色标识
                name: '',//角色名称
                remark: '',//备注
            };
        },
        //编辑员工对话框
        async EditRole(roleSign) {
            const { data: res } = await this.$http.get("getEditRole?roleSign=" + roleSign);//通过角色标识去查询需要编辑的角色信息
            this.editRoleForm = res;//查询角色信息反馈到表单里
            this.editDialogVisible = true;//开启编辑对话框
        },
        //编辑窗口关闭
        editClose() {
            this.title = '编辑窗体'
            this.editDialogVisible = false;
        },
        //确认修改
        editRoleInfo() {
            this.$refs.editRoleFormRef.validate(async valid => {
                if (!valid) return;
                //发起修改请求
                const { data: res } = await this.$http.put("editRole", this.editRoleForm)
                if (res.message != "成功") {
                    return this.$message.error("修改失败！");
                }
                this.$message.success("修改成功！");
                this.getRoleData();
                //隐藏
                return this.editDialogVisible = false;
            })
        },
        editRoleClear() {
            this.editRoleForm.name = '';
            this.editRoleForm.remark = '';
        },
        // 根据角色标识表示删除角色
        async DeleteRole(roleSign) {
            const confirmResult = await this.$confirm('此操作将永久删除员工，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirmResult != 'confirm') {//取消
                return this.$message.info("已取消删除")
            }
            const { data: res } = await this.$http.delete("deleteRoleSign?roleSign=" + roleSign);
            if (res.code != 200) {
                return this.$message.error("删除失败！");
            }
            this.$message.success("删除成功！");
            this.getRoleData();
        },
        //遍历员工roleSign

        handleSelectionChange() {
            //打印出来的数据 就是勾选获取的勾选那一行的数据
            //console.log(this.$refs.roleTable.selection);
            /// 遍历了 勾选获取的那一行数据 然后 赋值给我自己定义的roleRoleSigns这个数组了
            this.roleRoleSigns = this.$refs.roleTable.selection.map((item) => item.roleSign);
            // roleRoleSigns 这个数组 就是由勾选每一行的roleSign组成的数组了 这个数组里全是勾选那行的roleSign
            //console.log(this.roleRoleSigns, 777);
        },

        //根据角色roleSign删除员工(批量删除的方法)
        async batchDeleteRole() {

            const confirmResult = await this.$confirm('此操作将永久删除员工，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirmResult != 'confirm') {//取消
                return this.$message.info("已取消删除")
            }
            let roleRoleSigns = [];
            this.$refs.roleTable.selection.map((item) => {
                roleRoleSigns.push(item.roleSign);
            });
            console.log("参数为:" + roleRoleSigns);
            const { data: res } = await this.$http.delete("BatchDeleteRole", { data: roleRoleSigns });
            if (res.code != 200) {
                return this.$message.error("删除失败！");
            }
            this.$message.success("删除成功！");
            this.getRoleData();
        },

        //生效员工
        async roleStateShengXiao(roleSign, status) {
            var url = "roleStateShengXiao?roleSign=" + roleSign + "&status=" + status;
            const { data: res } = await this.$http.put(url);
            if (res.code == 302) {
                this.$message.success(res.message);
                return this.getRoleData();
            }
            if (res.code == 107) {
                return this.$message.error(res.message);
            }
            this.$message.error(res.message);
        },
        //失效员工
        async roleStateShiXiAo(roleSign, status) {
            var url = "roleStateShiXiAo?roleSign=" + roleSign + "&status=" + status;
            const { data: res } = await this.$http.put(url);
            if (res.code == 304) {
                this.$message.success(res.message);
                return this.getRoleData();
            }
            this.$message.error(res.message);
        },

        //根据员工roleSign生效员工(批量生效的方法)
        async batchShengXiaoRole() {
            let roleRoleSigns = [];
            this.$refs.roleTable.selection.map((item) => {
                roleRoleSigns.push(item.roleSign);
            });
            console.log("参数为:" + roleRoleSigns);
            const { data: res } = await this.$http.put("BatchShengXiaoRole", roleRoleSigns);
            if (res.code == 200) {
                this.$message.success(res.message);
                return this.getRoleData();
            }
            if (res.code == 111) {
                return this.$message.error(res.message);
            }
            this.$message.error(res.message);
        },

        //根据员工roleSign失效员工(批量失效的方法)
        async batchShiXiaoRole() {
            let roleRoleSigns = [];
            this.$refs.roleTable.selection.map((item) => {
                roleRoleSigns.push(item.roleSign);
            });
            console.log("参数为:" + roleRoleSigns);
            const { data: res } = await this.$http.put("BatchShiXiaoRole", roleRoleSigns);
            if (res.code == 200) {
                this.$message.success(res.message);
                return this.getRoleData();
            }
            if (res.code == 112) {
                return this.$message.error(res.message);
            }
            this.$message.error(res.message);
        },
    }
}
</script>

<style>
.content-search {
    background: #ffffff;
    height: 10px;
}

.el-table__body-wrapper {
    overflow-y: auto;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.row-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}
</style>